<template>
  <a-modal
    title="节点信息反馈"
    :width="800"
    :visible="visible"
    :confirm-loading="loading"
    destroy-on-close
    @ok="handleSubmit"
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model
        ref="ruleForm"
        :rules="rules"
        :model="form"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-row :gutter="24">
          <a-col
            :md="12"
            :sm="12"
          >
            <a-form-model-item
              class="feedbacks"
              label="反馈"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="feedbackCode"
            >
              <a-select
                v-model="form.feedbackCode"
                placeholder="请输入"
              >
                <a-select-option value="0">
                  能按计划完成
                </a-select-option>
                <a-select-option value="1">
                  不能按计划完成
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-model-item
              class="feedbacks"
              label="备注"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.remark"
                placeholder="请输入"
                :max-length="300"
                type="textarea"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-model-item
              class="feedbacks"
              label="附件"
              prop="fileInfos"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <l-table
                count="5"
                business-code="PM30"
                :upload-arrys.sync="form.fileInfos"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = ['feedbackCode', 'remark', 'fileIdList']

export default {
  name: 'a' + Date.now(),
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: {}
    }
  },
  computed: {
    // 校验规则
    rules() {
      if (this.model?.isProject === 1) {
        return {
          feedbackCode: [{ required: true, message: '请选择', trigger: 'change' }],
          fileIdList: [{ required: true, message: '请上传文件', trigger: 'change' }],

          fileInfos: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }]
        }
      } else {
        return {
          feedbackCode: [{ required: true, message: '请选择', trigger: 'change' }]
        }
      }
    }
  },
  watch: {
    // 监听附件实现附件校验
    'form.fileIdList'() {
      this.$nextTick(() => {
        this.$refs.ruleForm?.validateField('fileInfos')
      })
    },
    visible(v) {
      if (v) {
        this.form = {}
      }
    }
  },
  methods: {
    /**
     * 提交表单
     */
    handleSubmit() {
      // 校验表单
      const that = this
      this.$refs.ruleForm.validate((e) => {
        if (e) {
          this.$emit('ok', that.form)
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    }
  }
}
</script>
<style scoped>
/deep/ .feedbacks.ant-row.ant-form-item .ant-form-item-label {
  width: 90px;
}
</style>
